<template>
  <view class="container">
    <view class="avatar-section">
      <view class="avatar-box">
        <image class="avatar" :src="avatar" mode="aspectFill"></image>
      </view>
      <text class="tip">点击头像更换</text>
    </view>

    <view class="action-list">
      <view class="action-item" @tap="chooseImage('camera')">
        <uni-icons type="camera-filled" size="24" color="#1890ff"></uni-icons>
        <text>拍照</text>
      </view>
      <view class="action-item" @tap="chooseImage('album')">
        <uni-icons type="image" size="24" color="#1890ff"></uni-icons>
        <text>从相册选择</text>
      </view>
    </view>

    <button class="save-btn" @tap="handleSave">保存</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatar: '/static/images/default-avatar.png'
    }
  },
  onLoad() {
    // 获取当前用户头像
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.avatar) {
      this.avatar = userInfo.avatar
    }
  },
  methods: {
    chooseImage(sourceType) {
      uni.chooseImage({
        count: 1,
        sourceType: sourceType === 'camera' ? ['camera'] : ['album'],
        success: (res) => {
          this.avatar = res.tempFilePaths[0]
        }
      })
    },
    handleSave() {
      if (this.avatar === '/static/images/default-avatar.png') {
        uni.showToast({
          title: '请选择头像',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '保存中...'
      })

      // TODO: 上传头像
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  
  .avatar-box {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    overflow: hidden;
    
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
  
  .tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

.action-list {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 0;
  
  .action-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    
    text {
      font-size: 28rpx;
      margin-left: 20rpx;
    }
  }
}

.save-btn {
  margin-top: 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #1890ff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style> 